 <template>
  <!--合同 详细内容页面 -->
  <div id="container">
    <el-collapse v-model="activeNames" v-loading="loading">
      <!-- <el-collapse-item :title="title" name="1" class="itemClass">
        <contract-main-info
          ref="contractMainInfo"
          :data="contractAll.examine"
        ></contract-main-info>
      </el-collapse-item> -->
      <el-collapse-item title="合同信息" name="2">
        <contract-detail
          ref="contractDetail"
          :data="contractAll.contract"
        ></contract-detail>
      </el-collapse-item>
      <!-- <el-collapse-item title="客户信息" name="3">
        <customer-detail
          ref="customerDetail"
          :data="contractAll.customer"
        ></customer-detail>
      </el-collapse-item> -->
      <!-- <el-collapse-item title="跟进记录" name="4">
        <follow-record
          ref="followRecord"
          :list="contractAll.followList"
        ></follow-record>
      </el-collapse-item> -->
      <el-collapse-item title="报价产品信息" name="5">
        <quote-list ref="quoteList" :list="contractAll.quotesProducts">
        </quote-list>
      </el-collapse-item>
      <el-collapse-item title="生产产品信息" name="6">
        <produce-list
          ref="produceList"
          :list="contractAll.produceList"
        ></produce-list>
      </el-collapse-item>
      <el-collapse-item title="送货" name="7">
        <deliver-list
          ref="deliverList"
          :list="contractAll.deliverList"
        ></deliver-list>
      </el-collapse-item>
      <el-collapse-item title="计划回款" name="8">
        <plan-collect-list
          ref="planCollectList"
          :list="contractAll.planCollectList"
        ></plan-collect-list>
      </el-collapse-item>
      <el-collapse-item title="回款明细" name="9">
        <collect-list
          ref="collectList"
          :list="contractAll.customerPaymentList"
        ></collect-list>
      </el-collapse-item>
      <el-collapse-item title="审批流程" name="10">
        <check-process
          ref="checkProcess"
          :id="$route.query.id"
          :type="2"
          @updatePage="updatePage"
        ></check-process>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import contractMainInfo from './components/contractMainInfo.vue'
import contractDetail from './components/contractDetail.vue'
import customerDetail from './components/customerDetail.vue'
import followRecord from './components/followRecordList.vue'
import quoteList from './components/quoteList.vue'
import produceList from './components/produceList.vue'
import deliverList from './components/deliverList.vue'
import collectList from './components/collectList.vue'
import planCollectList from './components/planCollectList'
import checkProcess from '@/components/checkProcess/checkList'

export default {
  name: 'detail',
  data () {

    return {
      activeNames: ['1', '2',],
      checkCofig: [],
      contractAll: {},//合同详细信息
      title: '',
      time: '',//合同创建时间
      contractUser: '',//合同创建人
      loading: false
    }
  },
  components: {
    contractMainInfo,
    contractDetail,
    customerDetail,
    followRecord,
    quoteList,
    produceList,
    deliverList,
    collectList,
    planCollectList,
    checkProcess
  },
  mounted () {
    this.getDetail()
  },
  methods: {
    async getDetail () {
      this.loading = true
      let param = {
        id: this.$route.query.id,
        type: '2'//合同
      }
      let { data } = await this.$API.common.detail.getDetail.get(param)
      console.log(data)
      this.loading = false
      this.contractAll = data
      this.contractAll.examine.num = this.contractAll.contract.num
      this.contractAll.contract.totalStatus = this.contractAll.examine.totalStatus
      this.title = this.contractAll.examine.title
      this.time = this.contractAll.contract.createTime
      console.log(this.contractAll)
      this.activeNames.push('10')
    },
    updatePage () {
      this.getDetail()
      // this.$refs.contractMainInfo.relodPart()
      this.$refs.contractDetail.relodPart()
    }
  }
}
</script>
<style lang='scss' scoped>
#container {
  margin: 10px;
  :deep(.el-collapse-item__header) {
    padding-left: 20px;
    font-size: 16px;
  }
  :deep(.el-collapse-item__content) {
    padding: 0 20px 20px 20px;
  }
  :deep(.el-form-item) {
    margin-bottom: 5px;
  }
  :deep(.el-form-item__label) {
    color: #999;
  }

  .itemClass {
    :deep(.el-collapse-item__header) {
      font-weight: 600;
    }
  }
}
</style>